<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/axios.min.js"></script>
    <script src="js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="ele-2.15.7/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="ele-2.15.7/index.js"></script>
</head>
<body>

<style>

    .text {
        font-size: 14px;
    }

    .item {
        padding: 18px 0;
    }

    .box-card {
        width: 100%;
        height: 200px;
        margin: auto;
        margin-top:30px ;
    }





    .btn-add{
        font-size: 14px;
        float: right;
    }

    /*.pagerstyle{*/
    /*    margin-left: 1247px;*/
    /*}*/

     .avatar-uploader .el-upload {
         border: 1px dashed #d9d9d9;
         border-radius: 6px;
         cursor: pointer;
         position: relative;
         overflow: hidden;
     }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }


    .container-filter{
        height: 140px;
    }

    .operate-container{
        height: 60px;
        margin-bottom:20px;
    }

    .search-top{
        padding-bottom: 25px;
    }


</style>

<div id="app">


    <el-card class="box-card container-filter" shadow="never">
        <div class="search-top">
            <i class="el-icon-search"></i>
            <span> 筛选搜索</span>
            <el-button style="float: right;font-size: 12px" class="el-button--primary" @click="query(1)">查询结果</el-button>
            <el-button style="float: right;font-size: 12px; margin-right: 15px" @click="resetInput">重置</el-button>
        </div>
        <div>
            <el-form :inline="true" class="demo-form-inline"
                     style="display: flex; align-items: center">
                <div>
                    <el-form-item label="输入搜索:"  >
                        <el-input v-model="name" placeholder="商品名称" style="padding-right: 0px;width: 219px"></el-input>
                    </el-form-item>

                    <el-form-item label="商品价格:"  class="price">
                        <el-select v-model="price" placeholder="请选择">
                            <el-option
                                    v-for="item in priceOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>

                <div>
                    <el-form-item label="商品分类:" >
                        <el-select v-model="tid" placeholder="请选择">
                            <el-option
                                    v-for="item in typesOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="商品状态:"  >
                        <el-select v-model="status" placeholder="请选择">
                            <el-option
                                    v-for="item in statusOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>

            </el-form>
        </div>
    </el-card>

    <el-card class="box-card operate-container " shadow="never">
        <i class="el-icon-tickets"></i>
        <span>数据列表</span>
        <el-button class="btn-add" size="mini" @click="create" >
            <span>添加</span>
        </el-button>

    </el-card>

        <el-table :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}"
                  stripe
                  class="el-table--border  "
                  :data="tableData.data">
            <el-table-column prop="proid" label="编号" width="150"></el-table-column>

            <el-table-column prop="image" label="图片">
                <template slot-scope="scope">
                    <el-image
                            style="width: 100px; height: 100px"
                            :src="scope.row.image"
                            fit="contiain">
                    </el-image>
                </template>
            </el-table-column>

            <el-table-column prop="proname" label="商品名称"></el-table-column>
            <el-table-column prop="price" label="商品价格">

                <template slot-scope="scope">
                    <span>{{scope.row.price}}元</span>
                </template>

            </el-table-column>
            <el-table-column prop="tname" label="商品类别"></el-table-column>
            <el-table-column prop="" label="商品状态" width="130px">
<!--            商品上架和推荐  加入插槽后开关就能移动了-->
            <template slot-scope="scope">
                <el-switch

                        v-model="scope.row.status"
                        inactive-text="上架:"
                        active-color="#409EFF"
                        inactive-color="#ff4949"
                        :active-value="shoppingActive"
                        :inactive-value="shoppingInactive"
                        @change="changeStatus(scope.row)"
                        inactive-color = "red">
                </el-switch>

                <el-switch
                        style="margin-top: 5px"
                        v-model="scope.row.recommend"
                        inactive-text="推荐:"
                        active-color="#409EFF"
                        inactive-color="#ff4949"
                        :active-value="recommendActive"
                        :inactive-value="recommendInactive"
                        @change="changeRecommend(scope.row)"
                        inactive-color = "red">
                </el-switch>

            </template>

            </el-table-column>
            <el-table-column prop="quantity"  label="商品销量">
            <!--                通过插槽代替列的值-->
                <template slot-scope="scope">
                    <span v-if="scope.row.quantity==null">0</span>
                    <span v-else>{{scope.row.quantity}}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row);">编辑
                    </el-button>

                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row); remove(scope.row)">删除
                    </el-button>

                </template>
            </el-table-column>
        </el-table>

    <el-footer style="text-align: right">
        <el-pagination :page-size="pageSize" @current-change="query" @size-change="sizeChange"
                       background :page-sizes="[10,15,20]"
                       layout="total,sizes,prev, pager,next,jumper"
                       :total="tableData.total"
                       :current-page.sync="tableData.page">
        </el-pagination>
    </el-footer>

    <el-dialog title="商品添加" :visible.sync="dialogFormVisible"  :close-on-click-modal = "false">
        <div style="display: flex; justify-content: space-around;" >
            <el-form>
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                    <el-input v-model="editData.proname" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="商品类型" :label-width="formLabelWidth">
                    <el-select v-model="editData.tname" placeholder="请选择">
                        <el-option
                                v-for="item in typesOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.label">
                        </el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="商品价格" :label-width="formLabelWidth">
                    <el-input v-model="editData.price" autocomplete="off" ></el-input>
                </el-form-item>

                <!--                @change="handleChange"-->
                <el-form-item label="商品数量" :label-width="formLabelWidth">
                    <el-input-number
                            v-model="editData.num"
                            :min="1"
                            :max="10000"
                            label="商品数量">
                    </el-input-number>
                </el-form-item>



                <el-form-item label="商品推荐" :label-width="formLabelWidth">
                    <el-select v-model="editData.recommend" placeholder="请选择">
                        <el-option
                                v-for="recommend in productRcommend"
                                :value="recommend.value"
                                :label="recommend.label"
                                :key="recommend.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="商品介绍" :label-width="formLabelWidth">
                    <el-input
                            type="textarea"
                            :rows="3"
                            placeholder="请输入内容"
                            v-model="editData.message">
                    </el-input>
                </el-form-item>
            </el-form>
            <!--        图片上传-->
            <!--        这里的name是为了将文件上传默认file改成我们设置的image-->
            <el-upload
                    name = "image"
                    class="avatar-uploader"
                    action="UploadImageServlet.s"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="editData.image" :src="editData.image" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveProduct">确 定</el-button>
        </div>

    </el-dialog>
</div>
</body>
<script>

    var v = new Vue({
        el: "#app",
        data: {
            name: "",
            tid: "",
            tname : "",
            status: "",
            price : "",
            pageSize : 10,
            shoppingActive : "1",
            shoppingInactive : "0",
            recommendActive : "1",
            recommendInactive  : "0",
            editData: {proid: "", proname: "", num: "", tid: "", status: "", price: "", image: "", message: ""},
            dialogFormVisible: false,
            formLabelWidth: "100px",
            //种类下拉框
            typesOption : [],
            //商品推荐
            productRcommend : [{
               value : "1",
               label : "推荐"
            },{
                value : "0",
                label : "不推荐"
            }],
            //价格下拉框
            priceOption :[{
                value : '100~200',
                label : '100~200'
            },{
                value : '200~300',
                label : '200~300'
            },{
                value : '300~400',
                label : '300~400'
            },{
                value : '400~500',
                label : '400~500'
            },{
                value : '500~600',
                label : '500~600'
            },{
                value : '600~700',
                label : '600~700'
            },{
                value : '600~700',
                label : '700~800'
            },{
                value : '600~700',
                label : '800~900'
            }],
            // 状态下拉框
            statusOption: [{
                value: '',
                label: '全部'
            }, {
                value: '1',
                label: '上架'
            }, {
                value: '0',
                label: '下架'
            }],
            //表格数据
            tableData: {page:1}
        },
            created(){
            this.query(1);
            this.queryType();
        },
        methods: {


            handleSelect(item) {
                console.log(item);
            },
            handleEdit(index, data) {
                // 修改
                this.create();
                for (let i in data){
                    this.editData[i] = data[i];
                }
                    this.dialogFormVisible = true;
             },

            handleDelete(index, row) {
                console.log(index, row);
            },
            query(page) {
                axios.get("ProductServlet.s",{
                    params: {
                        name : this.name,
                        tid : this.tid,
                        status : this.status,
                        price : this.price,
                        currentPage : page, //当前页数
                        pageSize: this.pageSize //每页显示条目个数
                    }
                }).then(res=>{
                    this.tableData = res.data;
                    for (let d in this.tableData) {
                        if (d.status == 1){
                            this.tableData.status = true;
                        } else{
                            this.tableData.status = false;
                        }
                    }
                    this.tableData.page = page;
                })
            },
            sizeChange(page){
                this.pageSize =page;
                this.query(1);
            },
            // 物理删除
            remove(data){
                this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    axios.get("RemoveProductServlet.s", {
                        params: {
                            id: data.proid,
                            flag: "物理删除"
                        }
                    }).then(res =>{
                        this.$message({
                            type: 'success',
                            message: res.data.msg,
                        });
                        this.query(1);
                    })
                }).catch( ()=> {
                    this.$message({
                        type: 'info',
                        message:"已取消删除!"
                    });
                });
            },

            // 添加
            saveProduct(){
                // 构建post参数
                var params = new URLSearchParams();

                for (let name in this.editData){
                    params.append(name, this.editData[name]);
                }

                // 发送 ajax post 请求
                axios.post("SaveProductServlet.s", params).then(res=>{
                    if (res.data.code == 1){
                        this.$message(res.data.msg);
                        this.query(1); // 刷新表格
                        this.dialogFormVisible = false; // 关闭弹窗
                    } else{
                        this.$alert(res.data.msg);
                    }
                })
            },
            create(){
                this.editData = {proid: "", proname: "", num: "", tname: "", status: "", price: "", image: "", message: ""};
                this.dialogFormVisible = true;
            },
            // 图片上传组件
            // 上传之后
            handleAvatarSuccess(res, file) {
                // res 是后台返回的结果， 不过，此res != axios.res
                // res ==> axios.res.data
                // res.data ==> webpath
                // 注意 / 前面所代表的前缀
                // res.data.substring(1); 也可
                this.editData.image = "."+res.data;
                console.info(this.editData.image);
                this.$forceUpdate();
            },
            // 上传之前
            beforeAvatarUpload(file) {
                const isJPG = file.type.indexOf('image/') > -1;
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 图片 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

            //查询框重置
            resetInput(){
                this.name = "";
                this.type = "";
                this.status = "";
                this.price = ""

            },
            queryType(){
                axios.get("QueryTypeNameServlet.s",null).then(res=>{
                    this.typesOption = res.data;
                    this.restaurants = res.data;
                })
            },
            resetInput(){
                this.name ="";
                this.tid = "";
                this.status ="";
                this.price = "";
            },
            //商品推荐
            changeRecommend(data){
                console.info(data);

                if (data.recommend == 0){
                    this.$confirm('此操作将取消商品推荐, 是否继续?', '提示', {
                        type: 'warning'
                    }).then(() => {
                        axios.get("ShoppingRecommendServlet.s",{
                            params : {
                                recommend : data.recommend,
                                proid : data.proid
                            }
                        }).then(res=>{
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            });
                            this.query(1);
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '未取消商品推荐'
                        });
                        this.query(1);
                    });
                }else if(data.recommend == 1){
                    this.$confirm('此操作将设置该商品为被推荐, 是否继续?', '提示', {
                        type: 'warning'
                    }).then(() => {
                        axios.get("ShoppingRecommendServlet.s",{
                            params : {
                                recommend : data.recommend,
                                proid : data.proid
                            }
                        }).then(res=>{
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            });
                            this.query(1);
                        })
                    }).catch(() => {

                        this.$message({
                            type: 'info',
                            message: '该商品未被推荐'
                        });
                        this.query(1);
                    });
                }

            },
            //逻辑删除
            changeStatus(row){
                if (row.status == 0){
                    this.$confirm('此操作将下架该商品, 是否继续?', '提示', {
                        type: 'warning'
                    }).then(() => {
                        axios.get("RemoveProductServlet.s",{
                            params : {
                                status : row.status,
                                id : row.proid,
                                flag : "逻辑删除"
                            }
                        }).then(res=>{
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            });
                            this.query(1);
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '该商品未下架'
                        });
                        this.query(1);
                    });
                }else if(row.status == 1){
                    this.$confirm('此操作将上架该商品, 是否继续?', '提示', {
                        type: 'warning'
                    }).then(() => {
                        axios.get("RemoveProductServlet.s",{
                            params : {
                                id : row.proid,
                                status : row.status,
                                flag : "逻辑删除"
                            }
                        }).then(res=>{
                            this.$message(res.data.msg);
                            this.query(1);
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '该商品未上架'
                        });
                        this.query(1);
                    });
                }

            },
        },

    });
</script>

</html>